<script setup>
import {useRoute} from "vue-router";
import { listSeatStudent } from "@/api/system/classroom.js";
import StudentInfoDialog from '@/views/app/components/StudentInfoDialog.vue'

import {ref} from "vue";
const route = useRoute()

const seatWidth = 70
const seatHeight = 40
const queryParams = reactive({})
const classroomId = route.query.classroomId // 输出"vue3"
const seatStudents = ref([])

// 座位定位计算
const getSeatPosition = (seat) => {
  const baseX = 15  // 基础横向间距
  const baseY = 20  // 基础纵向间距

  return {
    left: `${seat.xindex * (seatWidth + baseX)}px`,
    bottom: `${seat.yindex * (seatHeight + baseY) + 100}px`, // 100为讲台高度补偿
    width: `${seatWidth}px`,
    height: `${seatHeight}px`
  }
}

// 座位点击处理
const handleSeatClick = (seat) => {
  if (seat.dmStudent) {
    selectedStudent.value = seat.dmStudent
    dialogVisible.value = true
  }
}

const dialogVisible = ref(false)
const selectedStudent = ref(null)



function getList() {
  queryParams.classroomId = classroomId
  queryParams.pageSize = 1000
  listSeatStudent(queryParams).then(response => {
    seatStudents.value = response.rows;
  });
}
getList();


// 增加以下状态变量
const scale = ref(1)
const offsetX = ref(0)
const offsetY = ref(0)
let lastDistance = 0
let initialScale = 1
let startX = 0
let startY = 0
let isPinching = false

// 处理触摸事件
const handleTouchStart = (e) => {
  if (e.touches.length === 2) {
    isPinching = true
    const touch1 = e.touches[0]
    const touch2 = e.touches[1]
    lastDistance = Math.hypot(
        touch2.clientX - touch1.clientX,
        touch2.clientY - touch1.clientY
    )
    initialScale = scale.value
  } else {
    startX = e.touches[0].clientX - offsetX.value
    startY = e.touches[0].clientY - offsetY.value
  }
}

const handleTouchMove = (e) => {
  if (!isPinching && e.touches.length === 1) {
    // 单指拖动
    offsetX.value = e.touches[0].clientX - startX
    offsetY.value = e.touches[0].clientY - startY
  } else if (e.touches.length === 2) {
    // 双指缩放
    const touch1 = e.touches[0]
    const touch2 = e.touches[1]
    const currentDistance = Math.hypot(
        touch2.clientX - touch1.clientX,
        touch2.clientY - touch1.clientY
    )

    // 计算缩放比例
    scale.value = Math.min(Math.max(0.5, initialScale * (currentDistance / lastDistance)), 3)
  }
}

const handleTouchEnd = () => {
  isPinching = false
}


</script>

<template>
  <div class="classroom-container">

    <div
        class="gesture-container"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
        @touchcancel="handleTouchEnd"
    >

      <!-- 座位布局区域 -->
      <div class="seat-map"
           :style="{
                transform: `translate3d(${offsetX}px, ${offsetY}px, 0) scale(${scale})`,
                transition: isPinching ? 'none' : 'transform 0.3s ease'}"
      >
        <!-- 动态生成座位 -->
        <div
            v-for="(seat, index) in seatStudents"
            :key="seat.seatId"
            class="seat"
            :style="getSeatPosition(seat)"
            @click="handleSeatClick(seat)"
        >
          <!-- 座位基础样式 -->
          <div class="desk">
            <div v-if="seat.dmStudent" class="student-info">
              {{ seat.dmStudent.studentName }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 讲台区域 -->
    <div class="platform"></div>

    <!-- 学生详情弹窗 -->
    <StudentInfoDialog
        v-model="dialogVisible"
        :student="selectedStudent"
    />
  </div>
</template>

<style scoped>
.classroom-container {
  position: relative;
  width: 100vw;
  height: 95vh;
/*  overflow-x: auto; !* 允许水平滚动 *!
  overflow-y: hidden; !* 禁用垂直滚动 *!*/
  background: #f0f2f5;
  overflow: hidden; /* 改为hidden防止滚动条 */
}

.seat-map {
  transform-origin: 0 0;
  will-change: transform; /* 优化动画性能 */
  position: relative;
  margin: 0 3%; /* 左右留白 */
  height: calc(100% - 100px); /* 预留讲台高度 */
}

.seat {
  position: absolute;
}

.desk {
  width: 100%;
  height: 100%;
  background: #a3d8f4;
  border-radius: 8px;
  position: relative; /* 新增定位上下文 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  &:hover {
    transform: translateY(-3px);
  }
}

.student-info {
  font-size: 14px;
  color: #333;
  padding: 4px;
  text-align: center;
  word-break: break-word; /* 长文本换行 */
  max-width: 90%; /* 限制文字宽度 */
}

.platform {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: #8d6e63;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 2; /* 确保讲台始终在上层 */

  &::before {
    content: '讲 台';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    letter-spacing: 4px;
  }
}

/* 添加手势容器样式 */
.gesture-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none; /* 禁用默认触摸行为 */
}

</style>